<template>
  <a-popover placement="bottom" trigger="click">
    <template slot="content">
      <div class="content">
        <h2 class="img-title">添加封面大图</h2>
        <UploadImg @showImg="showImg" v-if="!isShowImg"></UploadImg>
        <div class="img" v-else>
          <img class="size" :src="imageUrl" alt="avatar" />
          <span class="delete-ico cs" title='删除该图片' @click='deleteImg'>
            <a-icon type="delete" theme="filled" />
          </span>
        </div>
      </div>
    </template>
    <img
      class="img cs"
      src="https://sf1-scmcdn2-tos.pstatp.com/xitu_juejin_web_editor/img/icon-active.6abfa1e6.svg"
      alt=""
    />
  </a-popover>
</template>

<script>
import UploadImg from "@/components/article/Header/UploadImg";
export default {
  name: "Popover",
  components: {
    UploadImg,
  },
  data() {
    return {
      isShowImg: false,
      imageUrl: "",
    };
  },
  methods: {
    showImg(imageUrl) {
      this.imageUrl = imageUrl;
      this.isShowImg = true;
    },
    deleteImg() {
      this.isShowImg = false;
      this.imageUrl = '';
    }
  },
  created() {
    // 当登录成功后跳转回来能保存数据
    this.$bus.$on('getArticleImg', imgUrl => {
      this.$bus.$emit('article_img', imgUrl); // 让文章获得该头图
      this.isShowImg = true;
      this.imageUrl = imgUrl;
    })
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 23rem;
  padding: 3rem 0;
  .img-title {
    color: rgba(119, 127, 141, 0.8);
  }
  .size {
    width: 23rem;
  }
  .img {
    position: relative;
    .delete-ico {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 2.4rem;
      z-index: 20000;
    }
  }
}
</style>